<template>
  <div>
    <div class="card-list">
      <van-cell-group>
        <select-tag :selects="courseType" :multiple="false" @getSelected="getSelected">
          <van-field v-model="activeType.name" disabled label="课程类型" placeholder="请选择课程类型" />
        </select-tag>
        <van-cell title="课程名称" value="古筝课" />
        <select-tag :selects="students" :multiple="true" @getAllSelected="getAllSelected">
          <van-field v-model="course.students" disabled label="学生姓名" placeholder="请选择上课学生" clearable />
        </select-tag>
        <van-cell title="重复方式" value="内容" />
        <van-cell title="上课时间" value="内容" />
        <van-cell title="上课地点" value="内容" />
        <van-cell title="剩余课时" value="内容" />
      </van-cell-group>
    </div>

  </div>

</template>

<script>
import selectTag from '@/components/selectTag'
export default {
  data () {
    return {
      course: {
        name: '',
        students: '',
        type: '每周',
        time: '',
        last: '',
        address: ''
      },
      courseType: [{
        name: 'VIP一对一课程',
        id: 1
      },
      {
        name: '集体课程',
        id: 2
      }
      ],
      activeType: {},
      students: [{
        name: '分清扬',
        id: 1
      },
      {
        name: '李四',
        id: 2
      },
      {
        name: '张三丰',
        id: 3
      },
      {
        name: '张无忌',
        id: 4
      },
      {
        name: '金毛狮王',
        id: 5
      },
      {
        name: '玄冥二老',
        id: 6
      }
      ]
    }
  },
  methods: {
    getSelected (index) {
      this.activeType = this.courseType[index]
    },
    getAllSelected ({
      idx,
      names
    }) {
      this.studentsIndex = idx
      this.course.students = names
    }
  },
  components: {
    selectTag
  }
}
</script>

<style>
  .card-list {
    background-color: #F2F2F2;
    padding: 15px;
  }
</style>
